import React from 'react';
import {StyleSheet, View, processColor, Dimensions} from 'react-native';

import {BarChart} from 'react-native-charts-wrapper';

const totalWidth = Dimensions.get('window').width;

export default class BarChartScreen extends React.Component {
  constructor() {
    super();
  }
  componentWillMount(){
    let time;
    switch (this.props.time){
      case 1 :
        time = "近7日";
        break;
      case 2 :
        time = "近30日";
        break;
      case 3 :
        time = "全部";
        break;        
    }
    let aa = [];
    this.props.yy.map((val,idx) =>{
      aa.push({y: parseInt(val.y)});
    })
    this.setState({
      legend: {
        enabled: true,
        textSize: 14,
        form: 'SQUARE',
        formSize: 14,
        xEntrySpace: 10,
        yEntrySpace: 5,
        formToTextSpace: 5,
        wordWrapEnabled: true,
        maxSizePercent: 0.5,
        direction:"RIGHT_TO_LEFT"
      },
      data: {
        dataSets: [{
          values: aa,
          label: time+'播放量(单位：'+this.props.unit+')',
          config: {
            color: processColor('#fc6262'),
            barSpacePercent: 100,
            highlightAlpha: 90,
            barShadowColor: processColor('lightgrey'),
            // valueFormatter: 'largeValue', //largeValue,percent,null
          }
        }],
        config: {
          barWidth: 0.7
        }
      },
      xAxis: {
        valueFormatter: this.props.xx,
        granularityEnabled: true, //是否重复显示x轴标签
        labelRotationAngle: -45.0, //x轴label旋转角度
        position: "BOTTOM",  //label的位置
        drawGridLines: false, //网格的纵线是否显示
        drawLabels: true, //是否显示x轴label
        drawAxisLine: true,
        axisLineWidth: 1,
        axisLineColor: processColor("#cbcbcb"),
        textColor: processColor("#898989"), //x轴label的颜色
      }
    });
  }
  render() {
    return (
      <View style={styles.container}>
        <BarChart
          style={styles.chart}
          data={this.state.data}
          xAxis={this.state.xAxis}
          animation={{durationY: 1000}}
          legend={this.state.legend}
          gridBackgroundColor={processColor('#fff')}
          // drawBarShadow={true} //整柱背景
          drawValueAboveBar={true}
          drawHighlightArrow={false}
          scaleEnabled={false}
          drawGridBackground={true}
          keepPositionOnRotation={true}
          drawBorders={true}
          borderColor={processColor('transparent')}
          yAxis={{
            left:{
              inverted: false, //是否反转
              spaceBottom: 0, //距离下方的空白
              drawLabels: true, //是否绘制左y轴数值
              drawAxisLine: true,
              axisLineWidth: 1,
              axisLineColor: processColor("#cbcbcb"),
              textColor: processColor("#898989"), //x轴label的颜色
              drawGridLines: true,
              zeroLine: {
                enabled: false,
                lineWidth: 1
              },
              granularity: 1 //左y轴步进值
            },
            right: {
              enabled: false
            }}}
          marker={{
            enabled: true,
            markerColor: processColor('#000'),
            textColor: processColor('#fff'),
            textSize: 14
          }}
          chartDescription={{ text: '' }} //右下角水印
          // onSelect={this.handleSelect.bind(this)}
          chartBackgroundColor={processColor("transparent")} //chart背景颜色
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  chart: {
    flex: 1,
    width: totalWidth*0.6,
    height: totalWidth*0.5,
  }
});